<template>
    <div class="commonPage">
        <div class="title">
            <NuxtImg src="/img/nav3-9.png" alt="" />
            <strong>{{ $t(name) }}</strong>
        </div>
        <div class="tabcontexts">
            <div>
                <el-select v-model="privider" :placeholder="$t('language.home.searchselect1')" style="width: 24%">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <el-select v-model="tags" :placeholder="$t('language.home.searchselect2')" style="width: 24%">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <el-select v-model="player" :placeholder="$t('language.home.searchselect3')" style="width: 24%">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>
            <div>
                <el-input v-model="searchValue" style="width: 240px">
                    <template #prefix>
                        <el-icon class="el-input__icon">
                            <search />
                        </el-icon>
                    </template>
                </el-input>
            </div>
        </div>
        <ul class="game">
            <li v-for="(item, index) in  hangleGameList" :key="index">
                <Skeleton :loading="loading">
                    <template #ske>
                        <div style="width: 100%;display: flex;justify-content: space-between;align-items: center;">
                            <div style="display: flex;justify-content: flex-start;align-items: flex-start;flex-direction: column;width: 15.4%;"
                                v-for="(child, index) in 6" :key="index + '3'">
                                <el-skeleton-item variant="text"
                                    style=" width: 150px;height: 30px;margin-bottom: 15px;" />
                                <el-skeleton-item variant="image"
                                    style=" width: 100%;;height: 200px;border-radius: 10px;" />
                            </div>
                        </div>
                    </template>
                    <template #main>
                        <dl :ref="(el: refItem) => handleSetFromMap(el, index, item.children)"
                            :style="{ width: 100 * getList(item.children) + '%' }">
                            <template v-for="(child, index) in getList(item.children)" :key="index + '0'">
                                <dd>
                                    <div v-for="(sun, ind) in item.children.slice(6 * index, 6 * (index + 1))">
                                        <h3>{{ sun.name }}</h3>
                                        <div class="mainimg">
                                            <NuxtImg lazy="loading" :src="sun.img" alt="" />
                                            <NuxtImg  class="target" :src="sun.topleft" alt="" />
                                        </div>

                                    </div>
                                    <div v-for="zz in (6 - item.children.slice(6 * index, 6 * (index + 1)).length)">
                                    </div>
                                </dd>
                            </template>
                        </dl>
                    </template>
                </Skeleton>

            </li>
        </ul>
        <strong class="btnv">{{ $t("language.hotgame.btnv") }}</strong>
        <ul class="game">
            <li v-for="(item, index) in HomeGameList2" :key="index">
                <div class="title">
                    <div class="title-left">
                        <img :src="item.namelogo" alt="">
                        <span>{{ $t(item.modulename) }}</span>
                    </div>
                    <div class="title-right">
                        <p>{{ item.start }}
                            <el-icon :class="item.start == 1 ? 'opacity' : ''" size="22" color="#babac8"
                                @click="prelist(item, index)">
                                <ArrowLeft />
                            </el-icon>
                            <el-icon size="22" :class="item.start == getList(item.children) ? 'opacity' : ''"
                                color="#babac8" @click="nextlist(item, index)">
                                <ArrowRight />
                            </el-icon>
                        </p>
                    </div>
                </div>
                <dl :ref="(el: refItem) => handleSetFromMap2(el, index, item.children)"
                    :style="{ width: 100 * getList(item.children) + '%' }">
                    <template v-for="(child, index) in getList(item.children)" :key="index + '0'">
                        <dd>
                            <div v-for="(sun, ind) in item.children.slice(6 * index, 6 * (index + 1))">
                                <h3>{{ sun.name }}</h3>
                                <div class="mainimg">
                                    <NuxtImg :src="sun.img" alt="" />
                                    <NuxtImg class="target" :src="sun.topleft" alt="" />
                                </div>
                            </div>
                            <div v-for="zz in (6 - item.children.slice(6 * index, 6 * (index + 1)).length)">
                            </div>
                        </dd>
                    </template>
                </dl>
            </li>
        </ul>
    </div>
</template>

<script setup lang="ts">
import { shallowRef, ref, reactive } from "vue"
import { Search, ArrowRight, ArrowLeft } from '@element-plus/icons-vue'
import { HomeGameList1 } from "../utils/gamelist"
const privider = shallowRef<string>('')
const tags = shallowRef<string>('')
const player = shallowRef<string>('')
let searchValue = shallowRef<string>("")
let loading = shallowRef(false)
// 获取标题名称
const route = useRoute();
const name = route.query.name;
const options = [
    {
        value: 'Option1',
        label: 'Option1',
    },
    {
        value: 'Option2',
        label: 'Option2',
    },
    {
        value: 'Option3',
        label: 'Option3',
    },
    {
        value: 'Option4',
        label: 'Option4',
    },
    {
        value: 'Option5',
        label: 'Option5',
    },
]
// 动态设置ref
let hangleGameList = HomeGameList.map((i: any) => {
    i['start'] = 1
    return i
});
let HomeGameList2 = HomeGameList1.map((i: any) => {
    i['start'] = 1
    return i
});
type refItem = Element | ComponentPublicInstance | null;
const swiperMap: any = ref({});
const handleSetFromMap = (el: refItem, index: number, item: any) => {
    if (el) {
        swiperMap.value[`swiper${index}`] = el;
    }
};
const handleSetFromMap2 = (el: refItem, index: number, item: any) => {
    if (el) {
        swiperMap.value[`swiper2${index}`] = el;
    }
};

const nextlist = (item: any, index: number) => {
    let time = getList(item.children)
    let step = 100 / time
    let move: any = null

    if (time - HomeGameList2[index]['start'] >= 1) {
        move = step * HomeGameList2[index]['start']
        HomeGameList2[index]['start']++
    }
    swiperMap.value[`swiper2${index}`].style.transform = `translateX(-${move}%)`
}
const prelist = (item: any, index: number) => {
    let time = getList(item.children)
    let step = 100 / time
    let move: any = null
    if (HomeGameList2[index]['start'] - 2 >= 0) {
        move = step * (HomeGameList2[index]['start'] - 2)
        HomeGameList2[index]['start']--
    }
    swiperMap.value[`swiper2${index}`].style.transform = `translateX(-${move}%)`
}
//整除
let getList = (list: any): number => {
    return Math.ceil(list.length / 6);
}
let activeindex = shallowRef<number>(0);
</script>

<style scoped lang="scss">
.commonPage {
    width: 100%;

    .title {
        margin: 10px 0 20px 0;

        img {
            width: 30px;
            margin-right: 15px;
        }

        @include flex(row, flex-start, center);

        strong {
            color: #b5bac8;
            font-size: 30px;
        }

    }

    .tabcontexts {
        width: 100%;
        @include flex(row, space-between, center);
        padding: 10px 0 40px 0;

        div {
            height: 36px;
        }

        div:nth-child(1) {
            flex: 1;

            .el-select+.el-select {
                margin-left: 20px;
            }
        }

        div:nth-child(2) {
            width: 240px;


        }
    }

    .game {
        width: 100%;

        li {
            width: 100%;
            overflow: hidden;

            .title {
                @include flex(row, space-between, center);
                margin: 18px 0;

                .title-left {
                    @include flex(row, flex-start, center);

                    img {
                        width: 24px;
                        margin-right: 10px;
                    }

                    span {
                        font-size: 24px;
                        color: #fff;
                    }
                }

                .title-right {
                    @include flex(row, flex-end, center);

                    strong {
                        width: 150px;
                        display: block;
                        height: 30px;
                        color: #fff;
                        font-weight: normal;
                        background-color: #0f1012;
                        line-height: 30px;
                        border-radius: 5px;
                        text-align: center;
                        margin-right: 20px;

                    }


                    img {
                        width: 30px;
                        border-radius: 5px;
                    }

                    img+img {
                        margin-left: 10px;

                    }

                    .el-icon {
                        cursor: pointer;
                        transition: opacity 0.2s ease-in;
                        opacity: 1;
                    }

                    .opacity {
                        opacity: 0;
                    }
                }
            }

            dl {
                transition: all 0.4s ease-in-out;
                width: 100%;
                @include flex(row, flex-start, center);

                dd {
                    width: 100%;
                    @include flex(row, space-between, flex-start);

                    >div {
                        width: 15%;
                        transition: all 0.4s ease;
                        &:hover {
                            transform: translateY(-13px);
                        }

                        h3 {
                            color: #fff;
                            height: 38px;
                            line-height: 38px;
                            font-size: 16px;
                        }

                        .mainimg {
                            width: 100%;
                            position: relative;
                            padding-bottom: 136.4%;
                            cursor: pointer;

                            img {
                                width: 100%;
                                border-radius: 15px;
                                width: 100%;
                                height: 100%;
                                position: absolute;
                                left: 0;
                                top: 0;
                            }

                            .target {
                                position: absolute;
                                left: 0;
                                top: 0;
                                width: 50px;
                                height: 40px;
                                border-radius: 0px;
                            }
                        }

                    }
                }
            }
        }

    }


    .btnv {
        margin: 30px auto 40px;
        display: block;
        width: 150px;
        height: 32px;
        line-height: 32px;
        background-color: #0c8560;
        border-radius: 5px;
        text-align: center;
        font-weight: normal;
        font-size: 14px;
        color: #fff;
    }

}
</style>
